<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时器</title>
		<style>
			#msg{ margin: 50px;font-size: 36px;}
			.btnstyle{ margin: 0px 0px 0px 50px;}
		</style>
	</head>
	<body>
		<div id="msg">0</div>
		
		<div class="btnstyle">
			<button id="btnStart" onclick="start()">开始计时</button>
			<button id="btnStop" onclick="stop();">结束计时</button>
		</div>
	</body>
	<script>
		var count=0;//总的计数
		var timer;//定时器
		var clickStart =1;//是否开始,标时
			//获得按钮对象
			var btnstyle=document.getElementById("btnStart");
			var msg=document.getElementById("msg");
		//点击开始，计时定时刷新+n，按钮名称：暂停计时
		function start(){
			if(clickStart %2 !=0){
			timer = setInterval(function(){//匿名属性
				count=count+1;
				msg.innerText=count;
				},10);//每10毫秒，自增
			
			clickStart++;
			btnStart.innerText='暂停计时';
			}else{
				//第二次点击按钮，清除定时器
			clearInterval(timer);
			clickStart=1;
			btnStart.innerText='开始计时';
				}
			}
				
		//点击结束，清除定时，总值=0，按钮名称：开始计时
		function stop(){
			count=0;
			clearInterval(timer);//清除定时器
			btnStart.innerText="开始计时";
			
		}
	</script>
</html>
